<template>
  <div class="container ml-3">
    <el-form  label-position="left" ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">
      <div class="title">基本参数</div>
      <el-checkbox  v-model="form.enable" :true-label="1" :false-label="0">开启测温功能</el-checkbox >
      <div class="title">叠加显示信息</div>
      <div class="flex flex-col gap-2">
        <el-checkbox  v-model="form.showColorRuler" :true-label="1" :false-label="0" >显示温度条</el-checkbox >
        <el-checkbox  v-model="form.showMaxTemp" :true-label="1" :false-label="0" >最高温</el-checkbox >
        <el-checkbox  v-model="form.showMinTemp" :true-label="1" :false-label="0" >最低温</el-checkbox >
        <el-checkbox  v-model="form.showAvgTemp"  :true-label="1" :false-label="0">平均温</el-checkbox >
<!--        <el-checkbox  v-model="form.showEmissivity"  :true-label="1" :false-label="0">辐射率</el-checkbox >-->
<!--        <el-checkbox  v-model="form.showRuleName"  :true-label="1" :false-label="0" >规则名称</el-checkbox >-->
      </div>
        <el-form-item label="测温单位" label-width="120px">
            <select v-model="form.tempUnit" placeholder="">
              <option label="摄氏温度℃" value="Celsius"></option>
              <option label="华氏温度℉" value="Fahrenheit"></option>
              <option label="开尔文温度K" value="Kelvin"></option>
            </select>
          </el-form-item>
        <el-form-item label="测温档位" label-width="120px">
          <select v-model="form2.currentRangeId" placeholder="">
            <option
              v-for="item in tempRangeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </option>
          </select>
        </el-form-item>
<!--      <el-form-item label="算法版本" label-width="120px">-->
<!--        <input disabled v-model="form.tempAlgVersion" >-->
<!--      </el-form-item>-->
        <el-button class="!mt-8" type="primary" @click="save" style="margin-left: 0px; width: 120px">保存</el-button>
    </el-form>
  </div>
</template>

<script>
import {
  basicconfig,
  getbasicconfig,
  getthermalBasicConfig,
  measureRange,
  postmeasureRange,
  thermalBasicConfig
} from "../../../api/api";
export default {
  name: 'index',
  components: {
  },
  data() {
    return {
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      radio: '1',
      tempRangeOptions: [],
      form: {
      },
      form2: {
        currentRangeId: null
      },
      rules: {
      },
    }
  },
  created() {
    // this.fetchTempRanges();
    getbasicconfig().then(response => {
      this.form = response.data;
    })
    // getthermalBasicConfig().then(response => {
    //   this.form2 = response.data;
    // })
    measureRange().then(response => {
      // "rangeParam": [
      //   {
      //     "rangeId": 1,
      //     "maxTemp": 150,
      //     "minTemp": -20
      //   },
      //   {
      //     "rangeId": 2,
      //     "maxTemp": 350,
      //     "minTemp": 0
      //   }
      // ]
      this.tempRangeOptions = response.data.rangeParam.map(item => {
        return {
          label: `${item.minTemp} - ${item.maxTemp}`,
          value: item.rangeId
        }
      });
      this.form2.currentRangeId = response.data.currentRangeId
    })
  },
  methods: {
    async fetchTempRanges() {
      try {
        const response = await fetch('/config/tempRanges.json');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        this.tempRangeOptions = data; // Update the data property
      } catch (error) {
        console.error("Could not fetch temperature ranges configuration:", error);
        // this.tempRangeOptions = [ { label: 'Default', value: 0 } ];
      }
    },
    save(){
      basicconfig(this.form).then(response => {
        console.log(response)
        if (response.code === 0) {
          // this.$message.success("保存成功");
        } else {
          this.$message.error("保存失败");
        }
      })
      postmeasureRange({currentRangeId: this.form2.currentRangeId}).then(response => {
        if (response.code === 0) {
          this.$message.success("保存成功");
        } else {
          this.$message.error("保存失败");
        }
      })
      // thermalBasicConfig(this.form2).then(response => {
      //   console.log(response)
      //   if (response.code === 0) {
      //     this.$message.success("保存成功");
      //   } else {
      //     this.$message.error("保存失败");
      //   }
      // })
    },
  }
}
</script>

<style scoped>
.container {
  //margin-left: 15%;
  //margin-top: 5%;
}
.week-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  flex-direction: row;
}

.day-schedule {
  flex: 0 0 35%; /* Each .day-schedule will try to take up half the width of its container */
  max-width: 50%; /* Ensures that the .day-schedule does not exceed half the width */
  box-sizing: border-box;
}

.block {
  display: flex;
  margin-top: 10px;
}

@media (max-width: 600px) { /* Adjust the breakpoint as needed */
  .day-schedule {
    flex: 0 0 100%; /* On smaller screens, the .day-schedule will take the full width */
    max-width: 100%;
  }
}
.button {
  margin-left: 15%;
}
.el-form-item .el-form-item {
  margin-bottom: 10px;
}
select, input {
  width: 202px;
}


.title  {
  background-color: #F2F2F2;
  font-weight: 700;
  margin-top: 10px;
}

.title {
  background-color: #F2F2F2;
  font-weight: 700;
  padding-left: 15px;
  margin-top: 10px;
  margin-bottom: 5px;
}
.title {
  height: 30px;
  line-height: 30px;
}
.el-checkbox {
  margin-bottom: 10px;
  display: block !important;
}
</style>
